<template>
  <Layout title="项目新建" showBack >
    <van-form @submit="submitEvt">
      <!-- 基本信息  -->
      <van-cell-group insert>
        <p class="my-title">基本信息</p>
        <van-field
          v-model="submitObj.name"
          name="name"
          label="项目名"
          placeholder="请输入项目名"
          :rules="[{ required: true, message: '请输入项目名称' }]"
        ></van-field>
        <van-field
          v-model="submitObj.signTime"
          name="signTime"
          label="签订日期"
          placeholder="请选择签订日期"
          readonly
          :rules="[{ required: true, message: '选择创建时间' }]"
        >
          <template #button>
            <van-button
              class="buttons"
              size="small"
              @click="showTime = true"
              type="primary"
              >选择日期</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="submitObj.createArea"
          name="createArea"
          label="地市"
          placeholder="请选择签订地点"
          readonly
          :rules="[{ required: true, message: '请选择地市' }]"
        >
          <template #button>
            <van-button
              class="buttons"
              size="small"
              @click="showArea = true"
              type="primary"
              >选择地市</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="submitObj.address"
          name="address"
          label="详细地址"
          placeholder="请输入详细地址"
          :rules="[{ required: true, message: '请输入详细地址' }]"
        ></van-field>
      </van-cell-group>
      <!-- 业主信息 -->
      <van-cell-group insert>
        <p class="my-title">业主信息</p>
        <van-field
          v-model="submitObj.ownerName"
          name="ownerName"
          label="业主"
          placeholder="请输入业主姓名"
          :rules="[{ required: true, message: '请输入业主姓名' }]"
        ></van-field>
        <van-field
          v-model="submitObj.ownerAddress"
          name="ownerAddress"
          label="业主地址"
          placeholder="请输入业主地址"
          :rules="[{ required: true, message: '请输入业主地址' }]"
        ></van-field
        ><van-field
          v-model="submitObj.ownerPhone"
          name="ownerPhone"
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[{ required: true, message: '请输入联系电话' }]"
        ></van-field>
      </van-cell-group>
      <!-- 备注信息 -->
      <van-cell-group>
        <p class="my-title">备注信息</p>
        <van-field
          v-model="submitObj.remark"
          name="remark"
          label="备注"
          placeholder="请输入备注"
        ></van-field>
      </van-cell-group>
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        style="margin-top: 20px; margin-bottom: 10px"
      >
        提交
      </van-button>
    </van-form>
    <!-- 日期选择器 -->
    <van-calendar v-model:show="showTime" @confirm="timePickerEvt" />
    <!-- 选择地区弹出框 -->
    <van-popup v-model:show="showArea" style="height: 80%" position="bottom">
      <van-area
        title="标题"
        :area-list="areaList"
        @confirm="AreaPickerEvt"
        @cancel="showArea = false"
      />
    </van-popup>
  </Layout>
</template>
<script setup>
import { showSuccessToast, showFailToast } from 'vant';
import { commonDefinition } from "../../store";
import { ref, reactive, onMounted } from "vue";
//引入保存项目接口
import { projectSaveApi } from "../../apis/projectApi";
// 引入城市信息
import { areaList } from "@vant/area-data";
const userInfo =commonDefinition().getUserInfo
const showTime = ref(false);
const showArea = ref(false);
const submitObj = reactive({
  name:'',
liableId:userInfo.id,
liableName:userInfo.name,
signTime:'',
province:'',
city:'',
county:'',
createArea:'',
address:'',
ownerId:'',
ownerName:'',
ownerAddress:'',
ownerPhone:'',
remark:'',

});
async function submitEvt() {
  console.log(submitObj);
let result= await projectSaveApi(
    submitObj
)
 if (result.code === 200){
  showSuccessToast('大喜特喜，保存成功~')
 }else{
  showFailToast('保存失败啦~')
 }
}


function timePickerEvt(_time) {
  showTime.value = false;
  submitObj.signTime = `${_time.getFullYear()}-${
    _time.getMonth() + 1
  }-${_time.getDate()}`;
}

function AreaPickerEvt(result) {
  showArea.value = false;
  submitObj.createArea = `${result.selectedOptions[0].text}-${result.selectedOptions[1].text}-${result.selectedOptions[2].text}`
  
}
</script>
<style lang="less">
@import url("../../style/common.less");
.my-title {
  margin-left: 10px;
  font-size: 14px;
}
</style>
